<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const list = 
[
  { id: '1001', manager: '管理员', name: '行政部', pid: '' },
  { id: '1002', manager: '管理员', name: '财务部', pid: '' },
  { id: '1003', manager: '管理员', name: '人事部', pid: '' },
  { id: '1004', manager: '巴斯慧', name: '上海事业部', pid: '1001' },
  { id: '1005', manager: '孙财', name: '财务核算部', pid: '1002' },
  { id: '1006', manager: '张飞', name: '税务管理部', pid: '1002' }
]
function getListTree(list) {
  console.log(list)
  // 1. 定义两个变量
  const treeList = []
  const map = {}

  // 2. 建立一个映射关系，并给每个元素补充children属性.
  // 映射关系: 目的是让我们能通过id快速找到对应的元素
  // 补充children：让后边的计算更方便
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    map[item.id] = item
  })

  // 循环
  list.forEach(item => {
    // 对于每一个元素来说，先找它的上级
    //    如果能找到，说明它有上级，则要把它添加到上级的children中去
    //    如果找不到，说明它没有上级，直接添加到 treeList
    // if (item.pid) {
    const parent = map[item.pid]
    // 如果存在上级则表示item不是最顶层的数据
    if (parent) {
      parent.children.push(item)
    } else {
      // 如果不存在上级 则是顶层数据,直接添加
      // console.log(item)
      treeList.push(item)
    }
  })
  // 返回
  return treeList
}
const res = getListTree(list)
console.log(res);
/* const arr = {}
list.forEach(item =>{
    item.children = []
arr[item.id] = item
})
console.log(arr);
let rel = []
list.forEach(item=>{
    if(item.pid){
const parent = arr[item.pid]
parent.children.push(item)

    }else{
rel.push(item)
    }
})
console.log(rel); */
/* function getListTree(){
// 定义一个空的对象，把数组的每一项添加上id属性，分别对应的是对象
const map = {}
list.forEach(item =>{
    // 遍历原数组，给每一个对象加上一个数组，接收孩子对象
    item.children= []
// 把每一项分别添加到map对象中
    map[item.id] = item
})
console.log(list);
console.log(map);
// 用于放置最终的数组
const treeList = []
list.forEach(item => {
    // 如果有pid属性的话
    if(item.pid){
        // 获取到parent对象
        const parent = map[item.pid]
        // 把该对象放置到父对象对应的数组中
        parent.children.push(item)
    }else{
        // 直接放置到总的对象中
        treeList.push(item)
    }
})
return treeList
}
const res = getListTree(list)
console.log(res); */
    </script>
</body>
</html>